import React, { Component } from 'react'
import { InputItem, Modal } from 'antd-mobile'
import { NavBar, Button, Icon, Item } from 'components'
import './Recharge.less'

export default class Recharge extends Component<any, any> {

    public state = {
        payModal: false,
        selectPay: false,
        payMoney: '100.00',
        payWay: '支付宝支付'
    }
    // modal暂时不显示，支付跳转到selectPay页面
    public render (): JSX.Element {
        const { payWay, selectPay, payMoney, payModal } = this.state
        return (
            <div className="recharge">
                <NavBar title={<div style={{fontSize: '0.97rem', color: '#222'}}>充值</div>} fixed={true} />
                <div className="recharge_content">
                    <div className="recharge_content_title">充值金额</div>
                    <div className="recharge_content_inputWrap">
                        <div>￥</div>
                        <div>
                            <InputItem
                                defaultValue={payMoney}
                                className="recharge_content_inputWrap_input"
                                maxLength={5}
                                clear={true}
                                onChange={this.handleInputChange}
                                placeholder="请输入充值金额"
                            />
                        </div>
                    </div>
                </div>
                <div className="recharge_content_btnWrap">
                    <Button className="recharge_content_btn" onClick={this.handleNextStep}>下一步</Button>
                </div>
                <Modal
                    className="recharge_payModal_modal"
                    popup={true}
                    visible={payModal}
                    onClose={() => {this.hiddenModal('payModal')}}
                    animationType="slide-up"
                >
                    <div className="recharge_payModal_content">
                        <div className="recharge_payModal_content_title">
                            <div className="flex_center">确认付款</div>
                            <div className="flex_center"><Icon type="close" onClick={() => {this.hiddenModal('payModal')}} /></div>
                        </div>
                        <div className="recharge_payModal_content_money DINPro">￥{payMoney}</div>
                        <Item 
                            className="recharge_payModal_content_item" 
                            title={<div className="recharge_payModal_content_item_title">订单信息</div>} 
                            value={<div className="recharge_payModal_content_item_value">充值</div>} 
                        />
                        <Item 
                            onPress={() => {this.showModal('selectPay')}}
                            className="recharge_payModal_content_item" 
                            title={<div className="recharge_payModal_content_item_title">订单信息</div>} 
                            value={<div className="recharge_payModal_content_item_value">{payWay} <Icon type="arrow_right" /></div>} 
                        />
                        <Button className="recharge_payModal_content_btn" onClick={this.handelPay}>确认支付</Button>
                    </div>
                </Modal>
                <Modal
                    className="recharge_selectPay_modal"
                    popup={true}
                    visible={selectPay}
                    onClose={() => {this.hiddenModal('selectPay')}}
                    animationType="slide-up"
                >
                    <div className="recharge_selectPay_content">
                        <div className="recharge_selectPay_content_title">
                            <div className="flex_center">选择付款方式</div>
                            <div className="flex_center">
                                <Icon type="arrow_left" onClick={() => {this.hiddenModal('selectPay')}} />
                            </div>
                        </div>
                        <Item 
                            onPress={() => {this.handleSelectPayWay('微信支付')}}
                            className="recharge_selectPay_content_item" 
                            title={<div className="recharge_selectPay_content_item_title">
                                <Icon type="wxPay" className="recharge_selectPay_content_item_title_wxIcon" />
                                <div>微信支付</div>
                            </div>} 
                            value={<div className="recharge_selectPay_content_item_value">
                                {
                                    (payWay === '微信支付') 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>} 
                        />
                        <Item 
                            onPress={() => {this.handleSelectPayWay('支付宝支付')}}
                            className="recharge_selectPay_content_item" 
                            title={<div className="recharge_selectPay_content_item_title">
                                <Icon type="aliPay" className="recharge_selectPay_content_item_title_aliIcon" />
                                <div>支付宝支付</div>
                            </div>} 
                            value={<div className="recharge_selectPay_content_item_value">
                                {
                                    (payWay === '支付宝支付') 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>} 
                        />
                    </div>
                </Modal>
            </div>
        )
    }
    
    private handelPay = () => {
        this.hiddenModal('payModal')
    }
    private handleInputChange = (val: string) => {
        const temp = val.replace(/[^0-9.]/g, '')
        this.setState({
            payMoney: temp
        })
    }
    private handleSelectPayWay = (value: string) => {
        this.setState({
            payWay: value,
            selectPay: false,
        })
    }
    private showModal  = (key: string) => {
        this.setState({
            [key]: true
        })
    }
    private hiddenModal  = (key: string) => {
        this.setState({
            [key]: false
        })
    }
    private handleNextStep = () => {
        const { SET_BEANS_ORDER } = this.props
        const { payMoney } = this.state
        const obj = {
            price: payMoney
        }
        SET_BEANS_ORDER(obj)
        this.props.history.push('/selectPay/?id=6')
        // this.showModal('payModal')
    }
}
